<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>智能创作平台</title>
    <link rel="icon" href="image/til.png" type="image/x-icon">
    <!--custom js-->
    <script src="js/jquery.js"></script>
    <script src="js/time.js"></script>
    <!--google fonts-->
    <link href="css/css2" rel="stylesheet">
    <!-- Boxicons -->
    <link href="css/boxicons.min.css" rel="stylesheet">
    <!-- insha style css-->
    <link rel="stylesheet" href="css/insha-style.css">

    <link rel="stylesheet" href="css/style3.css">
    <link rel="stylesheet" href="css/all_header.css">
</head>

<body>
<div class="main">
    <div class="sidebar">
        <div class="logo_content">
            <div class="logo">
                <div class="logo_name">
                    <a href="">
                        <i class="bx bx-meteor"></i>
                        智能创作平台
                    </a>
                </div>
            </div>
            <i class="bx bx-menu" id="toggle-menu-btn"></i>
        </div>
        <ul class="nav_list">
            <li>
                <i class="bx bx-search search-btn"></i>
                <input type="text" placeholder="搜索...">
                <span class="tooltip">搜索</span>
            </li>
            <li>
                <a href="/platform">
                    <i class="bx bx-grid-alt"></i>
                    <span class="links_name">创作中心</span>
                </a>
                <span class="tooltip">创作中心</span>
            </li>
            <li>
                <a href="/userInfo">
                    <i class="bx bx-user"></i>
                    <span class="links_name">用户信息</span>
                </a>
                <span class="tooltip">用户信息</span>
            </li>
            <li>
                <a href="/history">
                    <i class="bx bx-history"></i>
                    <span class="links_name">创作历史</span>
                </a>
                <span class="tooltip">创作历史</span>
            </li>
            <li>
                <a href="/trash">
                    <i class="bx bx-recycle"></i>
                    <span class="links_name">回收站</span>
                </a>
                <span class="tooltip">回收站</span>
            </li>
            <li>
                <a href="/help">
                    <i class="bx bx-help-circle"></i>
                    <span class="links_name">帮助文档</span>
                </a>
                <span class="tooltip">帮助文档</span>
            </li>
            <script>
                function userExit(){
                    var exitOrNot = confirm("确认退出吗，账号将注销");
                    if (exitOrNot === true){
                        window.location.href="/exit";
                    } else  {
                    }
                }
            </script>
        </ul>
        <div class="profile_content">
            <div class="profile">
                <div class="profile_details">
                    <img src="images/logo.jpg" alt="profile">
                    <div class="name_job">
                        <div class="name">版权所有</div>
                        <div class="job">中国矿业大学</div>
                    </div>
                </div>
                <i class="bx bx-log-out" id="log_out" onclick="userExit()" style="cursor: pointer"></i>
            </div>
        </div>
    </div>
    <script>
        function userExit(){
            var exitOrNot = confirm("确认退出吗，账号将注销");
            if (exitOrNot === true){
                window.location.href="/exit";
            } else  {
            }
        }
    </script>
    <div class="home_content">
        <section class="all_header">
            <div class="top_container">
                <div class="page_title">用户信息</div>
                <div class="ts">
                    <span class="hello">尊敬的</span>
                    <span class="hello" th:text="${session.user.name}" onclick="window.location.href='/userInfo'" style="cursor: pointer"></span>
                    <span class="hello">，现在是</span>
                    <span class="date"></span>
                    <span class="second"></span>
                </div>
            </div>
        </section>
        <section class="split"></section>
        <div class="info_container">
            <div class="head_sculpture" style="position:absolute;">
                <img id="portrait" src="/images/logo.jpg">
                <button id="submitImage" style="width: 100%;height: 5vh;border-radius: 12px; margin-bottom: 0">上传头像</button>
                <input class="submit" type="file" style="display:none" id="imageFile">
            </div>
            <div class="user_info">
                <h2>个人信息</h2>

                <div class="left">
                    <table>
                        <tr>
                            <td>用户名:</td>
                        </tr>
                        <tr>
                            <td>邮箱地址:</td>
                        </tr>
                        <tr>
                            <td>组织机构:</td>
                        </tr>
                        <tr>
                            <td>个人简介:</td>
                        </tr>
                    </table>
                </div>

                <div class="right">
                    <div><input id="info_username" readonly></div>
                    <div><input id="info_email"></div>
                    <div><input id="info_org"></div>
                    <div><textarea id="info_profile"></textarea></div>
                </div>

                <button class="modify" id="update_info">更新信息</button>
            </div>

            <div class="safe">
                <h2>账号安全</h2>
                <div class="left">
                    <div>
                        <label>手机:</label>
                    </div>
                    <input type="password" id="info_old_password" placeholder="原密码">
                </div>

                <div class="middle1">
                    <div>
                        <input class="phone" id="info_old_tel" readonly>
                    </div>
                    <input type="password" id="info_new_password" placeholder="新密码">
                </div>

                <div class="middle2">
                    <div><input type="tel" id="info_new_tel" placeholder="新手机号"></div>
                    <div><input type="password" id="info_check_password" placeholder="确认密码"></div>
                </div>

                <div class="right">
                    <div>
                        <button id="update_tel">修改手机号</button>
                    </div>
                    <div>
                        <button id="update_password">修改密码</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $.ajax({
        url: "/userInfo",
        type: "post",
        data: {},
        async: false,
        dataType: "json",
        success:function (data){
            var portrait = document.getElementById("portrait");
            $("#info_username").val(data.name);
            $("#info_email").val(data.email);
            $("#info_org").val(data.org);
            $("#info_profile").html(data.profile);
            $('#info_old_tel').val(data.tel);
            portrait.src = data.por;
            const LoginUser = data.name;
        }
    });

</script>
<script src="js/userInfo.js"></script>
<script src="js/sidebar.js"></script>
</body>
</html>